<template>
    <div >
      <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl" :before-close="close" size="75%"
        :append-to-body="true" destroy-on-close :modal-append-to-body="false">
        <div type="primary" class="drawer-close-btn" @click="close"><img class="drawer-back" src="@/assets/images/drawer-back.png" alt=""><span class="close-text">返回合同列表</span>
      </div>
        <div class="drawer-con-wrap">
          <div class="drawer-header">
            <!-- <div class="header-name">联系人</div> -->
            <div class="custom-header">
              <div class="header-left">
                <div class="star-list">
                  <i class="el-icon-star-off" @click="attentClick()" v-if="contractDetails.star!=1"></i>
                  <i class="el-icon-star-on" v-else @click="attentClick()"></i>
                </div>
                <div class="item" effect="dark" :content="customInfo.customerName" placement="top">
                  <span class="customer-name">{{ contractDetails.name }}</span>
                </div>
                <!-- <div class="arrow-list">
                  <el-button><i class="el-icon-arrow-left"></i></el-button>
                  <el-button><i class="el-icon-arrow-right"></i></el-button>
                </div> -->
              </div>
  
             
  
              <div class="header-right">
                <el-button class="deepColour" @click="btnEditInfo">编辑</el-button>
                <el-button class="headBtn">呼叫中心</el-button>
                <el-button class="headBtn">转移</el-button>
                <el-button class="headBtn" style="margin-right: 10px;">更改成交状态</el-button>
                <!-- <el-button class="headBtn"><i class="el-icon-more"></i></el-button> -->
                <el-dropdown  @command="downClick" style="height: 32px;">
                <!-- <el-button><i class="el-icon-more"></i></el-button> -->
                <img src="@/assets/images/drawer-more.png" style="height: 32px;width: 32px;">
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">打印</el-dropdown-item>
                  <el-dropdown-item command="2">删除</el-dropdown-item>
                  <el-dropdown-item command="3">复制合同</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              </div>
            </div>
  
            <!-- 编辑标签 -->
            <!-- <div class="link mt8">
              <el-tooltip class="item" effect="dark" content="编辑标签" placement="top">
                <i class="el-icon-link pointer edit-link"></i>
              </el-tooltip>
            </div> -->
            <!-- btn-list -->
            <!-- <div class="mt8"> -->
              <!-- <el-button @click="btnAdd(1)">创建任务</el-button> -->
              <!-- <el-button class="createBtn" @click="btnAdd(1)">创建联系人</el-button> -->
              <!-- <el-button>创建商机</el-button> -->
              <!-- <el-button class="createBtn" @click="btnAdd(2)">创建合同</el-button> -->
              <!-- <el-button class="createBtn" @click="btnAdd(3)">创建回款</el-button> -->
              <!-- <el-button @click="btnAdd(5)">添加团队成员</el-button> -->
            <!-- </div> -->
            <div class="mt8 mt8-black-btn">
            <el-button @click="btnAdd(1)" class="btn-hei" style="width: 125px;"><i class="el-icon-s-custom btn-icon"></i>创建联系人</el-button>
            <el-button @click="btnAdd(2)" class="btn-hei"><i class="el-icon-document-add btn-icon"></i>创建合同</el-button>
            <el-button @click="btnAdd(3)" class="btn-hei"><i class="el-icon-refresh-left btn-icon"></i>创建回款</el-button>
          </div>
  
            <div class="custom-base mt8">
              <div class="custom-base-item">
                <div class="item-label">客户名称</div>
                <div class="item-value">{{ contractDetails.name }}</div>
              </div>
              <div class="custom-base-item">
                <div class="item-label">职务</div>
                <div class="item-value">{{ contractDetails.post }}</div>
              </div>
              <!-- <div class="custom-base-item">
                  <div class="item-label">负责人</div>
                  <div class="item-value mt8">{{customInfo.ownerUserName}}</div>
                </div> -->
              <div class="custom-base-item">
                <div class="item-label">创建时间
                  <!-- <i class="rp rp-icon-fill-help rp-help-tips ml4"></i> -->
                </div>
                <div class="item-value mt8 ">{{ contractDetails.createTime }}</div>
              </div>
              <div class="custom-base-item">
                <div class="item-label">手机</div>
                <div class="item-value mt8 phone">{{ contractDetails.mobile }}</div>
              </div>
            </div>
  
  
            <!--  -->
            <div class="info-block-wrap">
              <div class="info-left-wrap">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="活动" name="activity">
                    <activityBlock />
                  </el-tab-pane>
                  <el-tab-pane label="详细资料" name="particular">
                    <!-- <BasicInformation></BasicInformation> -->
                    <!-- <EditBaseInfo></EditBaseInfo> -->
                    <EditBaseInfo :id="contractDetails.id" ref="EditBaseInfoContract" crmType='contract' :detail="contractDetailsCopy"></EditBaseInfo>
                  </el-tab-pane>
                  <el-tab-pane label="团队成员" name="crm">
                    <teamMember></teamMember>
                  </el-tab-pane>
                  <el-tab-pane label="附件" name="accessoryBlock">
                    <accessoryBlock />
                  </el-tab-pane>
                  <!-- <el-tab-pane label="联系人" name="contacts">
                    <contactsBlock></contactsBlock>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane label="客户地址" name="address">
                        <customAddress></customAddress>
                      </el-tab-pane> -->
                  <el-tab-pane label="操作记录" name="invice">
                    <RelativeHandle></RelativeHandle>
                  </el-tab-pane>
                  <el-tab-pane label="发票" name="invice">
                        <!-- <invoice></invoice> -->
                   </el-tab-pane>
                </el-tabs>
              </div>
              <!-- 客户摘要 -->
              <!-- <customSummary ref="customSummary"/> -->
            </div>
          </div>
        </div>
      </el-drawer>
  
      <addDialog ref="addDialog" :dialogTitle="dialogTitle" :addType="addType" :dialogType="dialogType" @refreshList="refreshList" :action="createAction"></addDialog>
    </div>
  </template>
  <script>
  // import data from './data.js';
  import activityBlock from '@/components/busComponents/activityBlock'
  import contactsBlock from '@/components/busComponents/contactsBlock'
  import customAddress from '@/components/busComponents/customAddress/index.vue'
  import invoice from '@/components/busComponents/invoice/index.vue'
  import customSummary from '@/components/busComponents/customSummary/index.vue'
  import RelativeHandle from '@/components/busComponents/RelativeHandle' // 操作记录
  import teamMember from '@/components/busComponents/teamMember/index.vue'
  import accessoryBlock from '@/components/busComponents/accessoryBlock'
  import BasicInformation from '@/components/BasicInformation/index.vue' // 相关操作
  import EditBaseInfo from '@/components/BasicInformation/EditBaseInfo.vue' // 相关操作
  import addDialog from '@/components/DialogCustom/addDialog.vue'
  import dataadd from '@/components/DialogCustom/dataadd.js'
  
  import { queryByIdContract,starContract } from "@/api/contract/contract";
  export default {
    components: { activityBlock, contactsBlock, customAddress, invoice, customSummary, RelativeHandle, teamMember, accessoryBlock, BasicInformation, EditBaseInfo, addDialog },
    name: "contractDrawer",
    props: {
      // contractDetails: {
      //   type: Object,
      //   default: () => {
      //     return {}
      //   }
      // }
    },
    data() {
      return {
        drawer: false,
        customInfo: {},
        customSbstractFlg: true,
        activeName: 'activity',
        sfAttent: false,
        dialogTitle: '',
        listFrom: [],
        dialogType: 1,
        contractDetails:{},
        contractDetailsCopy:{},
        addType: this.$GlobalStatus.tableType.Contract,
        rowData: {},
        createAction: {
          type: 'save',
          id: '',
          data: {}
        },
      }
    },
    watch: {
      // contractDetails: {
      //   handler (newValue, oldValue) {
      //     this.contractDetails = newValue
      //     console.log(this.contractDetails)
      //   },
      //   deep: true
      // }
    },
    mounted() {
      // this.$nextTick(()=>{
      // const fatherDom = document.querySelector("body");
      //   if(fatherDom.append){
      //     fatherDom.append(this.$el);
      //   }else{
      //     fatherDom.appendChild(this.$el);
      //   }
      // })
      
    },
    methods: {
      downClick (command) {
        this.$emit("drawerInfo", command, this.contractDetails.id);
        if(command == "3"){
          //复制合同
          this.btnEditInfo('copy');
        }
      },
      getInfo () {
        queryByIdContract(this.contractDetails.id).then(res => {
          this.contractDetailsCopy = res.data;
          // console.log(this.contractDetailsCopy)
        }).catch(error => {
  
        });
      },
      show(val) {
        this.contractDetails = val
        // console.log(this.contractDetails)
        this.drawer = true;
        this.getInfo()
      },
      close() {
        this.drawer = false;
      },
      handleClick(tab, event) {
        if (tab.paneName == "particular") {
           this.$refs.EditBaseInfoContract.refreshData();
        }
      },
      attentClick() {
        this.contractDetails.star?this.contractDetails.star=0:this.contractDetails.star=1
        starContract(this.contractDetails.id).then(res => {
          this.$message({
            message: this.contractDetails.star ? '关注成功' : '取消关注成功',
            type: 'success'
          });
        }).catch(error => {

        });
      },
      btnAdd(index) {
        // console.log(dataadd)
        this.dialogType = index;
        if (index == 1) {
          this.dialogTitle = "创建联系人"
          this.addType = this.$GlobalStatus.tableType.Contacts
          this.listFrom = JSON.parse(JSON.stringify(dataadd.phone)).data
        }
        if (index == 2) {
          this.dialogTitle = "创建合同"
          this.addType = this.$GlobalStatus.tableType.Contract
          this.listFrom = JSON.parse(JSON.stringify(dataadd.hetong)).data
        }
        if (index == 3) {
          this.dialogTitle = "创建回款"
          // this.addType = this.$GlobalStatus.tableType.Contract
          this.listFrom = JSON.parse(JSON.stringify(dataadd.huikuan)).data
        }
        this.$refs.addDialog.showFun();
      },
      btnEditInfo (text) {
        // console.log('987654321',this.detailData.version)
        this.addType = this.$GlobalStatus.tableType.Contract;
        console.log(this.addType)
        this.createAction.type = 'update';
        this.createAction.id = this.contractDetailsCopy.id;
        this.dialogTitle = "编辑合同"
        this.$refs.addDialog.showFun(this.contractDetailsCopy.id,this.contractDetailsCopy.version,this.contractDetailsCopy.batchId,text);
       
      },
      refreshList(){
        this.$emit("refreshList");
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  @import "@/assets/styles/drawer-back.scss";
  ::v-deep .el-drawer__body{
    background: #F5F6FA;
    box-shadow: -6px 0px 17px 0px rgba(38,44,71,0.15);
    border-radius: 4px 0px 0px 4px;
  }
  ::v-deep .el-tabs__item {
    color: #5A607F;
  }
  
  .btn-hei {
      color: #344563;
      border: 1px solid #DBDDE2;
      border-radius: 4px;
      .btn-icon {
        margin-right: 9px;
      }
    }
  .drawer-con-wrap {
    .mt8-black-btn {
      padding: 0 !important;
    }
    .mt8 {
      margin-top: 20px;
  
      .createBtn {
        color: #164ACD;
        border: 1px solid #DBDDE2;
      }
    }
  
    padding: 32px 32px 16px;
  
    .drawer-header {
      .header-name {
        font-size: 14px;
        color: #6b778c;
      }
  
      .custom-header {
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        .header-left {
          display: flex;
          align-items: center;
  
          .customer-name {
            font-size: 22px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji' !important;
            font-weight: 500;
            color: #131523;
          }
          .arrow-list {
            margin-left: 24px;
          }
  
          .star-list {
            margin-right: 10px;
  
            .el-icon-star-off {
              font-size: 18px;
              font-weight: 700;
              color: #dfe1e6;
              cursor: pointer;
            }
  
            .el-icon-star-on {
              color: #fac23d;
              margin-left: -3px;
              font-size: 22px;
              font-weight: 700;
              cursor: pointer;
            }
          }
        }
  
        .header-right {
  
          .headBtn {
            color: #164ACD;
            border: 1px solid #DBDDE2;
          }
  
          .deepColour {
            background-color: #204EC4;
            color: #ffffff;
            border: 1px solid #204EC4;
          }
        }
      }
  
      .link {
        .edit-link {
          font-size: 16px;
          margin-left: 8px;
        }
      }
  
      .custom-base {
        padding: 16px 0;
        background: #FFFFFF;
        box-shadow: 0px 1px 3px 0px rgba(21,34,50,0.08);
        border-radius: 3px;
        display: flex;
        align-items: stretch;
        flex-direction: row;
  
        .custom-base-item {
          // flex: 0 0 20%;
          // text-align: center;
          min-width: 25%;
          padding: 0 25px;
          // border-right: 1px solid #D7DBEC;
  
          .item-label {
          font-size: 14px;
          font-weight: 500;
          color: #7E84A3;
        }
        .item-value {
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
          color: #131523;
        }
  
          // .phone {
          //   color: #36b37e;
          // }
        }
        .custom-base-item:last-child{
          border-right: none;
        }
      }
  
      .info-block-wrap {
        display: flex;
        margin-top: 16px;
        align-items: stretch;
        flex-direction: row;
        background: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(21,34,50,0.08);
        border-radius: 4px;
        .info-left-wrap {
          flex: 1;
          padding:10px 25px 25px 25px;
          overflow: hidden;
          width: 100%;
        }
      }
    }
  }</style>